<template>
  <div class="sys-page">
        <el-button
      type="success"
      @click="refresh()"
      round
      style="float:right; margin-top:10px;"
      icon="el-icon-refresh"
    >刷新</el-button>
    <app-title :title="dialogTitle"></app-title>

   

    <el-collapse>
      <el-collapse-item >

        <template slot="title">
          <span style="font-size:20px;color:orange;">搜索</span>
          <i class="header-icon el-icon-search"></i>
        </template>

              <app-search style=" display:flex; width:100%;" >
                <el-form :inline="true" :model="searchForm" :rules="addRules" ref="searchForm">

                  <el-form-item label="终端ID搜索" prop="command">
                    <el-input v-model="searchForm.command" placeholder="000001"></el-input>
                  </el-form-item>

          

                  <el-form-item>
                      <div class="block">
                            <el-date-picker
                                  v-model="value7"
                                  type="daterange"
                                  range-separator="至"
                                  start-placeholder="开始日期"
                                  end-placeholder="结束日期"
                                  >
                            </el-date-picker>
                    </div>
                  </el-form-item>

                  <el-form-item>
                    <el-button icon="el-icon-delete" @click="reset">清空</el-button>
                    <el-button  type="primary" @click="search" :disabled="disButton">查询</el-button>
                  </el-form-item>

                </el-form>
              </app-search>
     
      </el-collapse-item>
    </el-collapse>

    <div style="  width:100%; display: flex;">
      <div id="main2" style="width:50%; height:350px;"></div>
      <div id="main" style="width:50%; height:350px;"></div>
    </div>

  </div>
</template>
<style scoped>
.el-table .warning-row {
  background: #f08080;
}
.block{
  width: 100%;
  text-align: center;
}
.el-table .success-row {
  background: #f0f9eb;
}
</style>

<script>
import echarts from 'echarts'
import '@/utils/echarts.theme.default'
export default {
  data() {
    var validateUser = (rule, value, callback) => {
      var pattern = /^[0-9]{1,}$/
      if (value === '') {
        this.disButton = true
        callback(new Error('搜索不能为空'))
      } else if (!pattern.test(value)) {
        this.disButton = true
        callback(new Error('搜索只能是数字'))
      } else {
        this.disButton = false
      }
    }
    return {
      searchForm: {
        command: '',
      },
      addRules: {
                command: [
                    {required: true, validator: validateUser, trigger: 'change' }
                ],
            },
      option: {
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: ['解绑笔数', '解绑金额']
        },
        toolbox: {
          show: true,
          feature: {
            mark: { show: true },
            dataView: { show: true, readOnly: false },
            magicType: { show: true, type: ['line', 'bar'] },
            restore: { show: true },
            saveAsImage: { show: true }
          }
        },
        calculable: true,
        xAxis: [
          {
            type: 'category',

            data: [],
          }
        ],
        yAxis: [
          {
            type: 'value'
          }
        ],
        series: [

          {
            barGap: '-1%',
            name: '解绑笔数',
            type: 'bar',
            data: [],
            markPoint: {
              data: [
                { type: 'max', name: '最大值' },
                { type: 'min', name: '最小值' }
              ]
            },
            markLine: {
              data: [
                { type: 'average', name: '平均值' }
              ]
            }
          },
          {
            name: '解绑金额',
            type: 'bar',
            data: [],
            markPoint: {
              data: [
                { name: '年最高', value: 182.2, xAxis: 7, yAxis: 183, symbolSize: 18 },
                { name: '年最低', value: 2.3, xAxis: 11, yAxis: 3 }
              ]
            },
            markLine: {
              data: [
                { type: 'average', name: '平均值' }
              ]
            }
          }
        ]
      },
      option2: {
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: ['解绑笔数', '解绑金额']
        },
        toolbox: {
          show: true,
          feature: {
            mark: { show: true },
            dataView: { show: true, readOnly: false },
            magicType: { show: true, type: ['line', 'bar'] },
            restore: { show: true },
            saveAsImage: { show: true }
          }
        },
        calculable: true,
        xAxis: [
          {
            type: 'category',

            data: [],
          }
        ],
        yAxis: [
          {
            type: 'value'
          }
        ],
        series: [

          {
            barGap: '-1%',
            name: '解绑笔数',
            type: 'bar',
            data: [],
            markPoint: {
              data: [
                { type: 'max', name: '最大值' },
                { type: 'min', name: '最小值' }
              ]
            },
            markLine: {
              data: [
                { type: 'average', name: '平均值' }
              ]
            }
          },
          {
            name: '解绑金额',
            type: 'bar',
            data: [],
            markPoint: {
              data: [
                { name: '年最高', value: 182.2, xAxis: 7, yAxis: 183, symbolSize: 18 },
                { name: '年最低', value: 2.3, xAxis: 11, yAxis: 3 }
              ]
            },
            markLine: {
              data: [
                { type: 'average', name: '平均值' }
              ]
            }
          }
        ]
      },
      value7: '',
      disButton: true,
      dialogTitle: "收费情况查询",
    }
  },
  mounted() {
    this.query()
  },
  methods: {
    chartsInit() {
      // 创建图表对
      var myChart = echarts.init(document.getElementById('main'));
      var myChart2 = echarts.init(document.getElementById('main2'));
      myChart.setOption(this.option);
      myChart2.setOption(this.option2);
    },
    refresh() {
      this.query()
      this.chartsInit()
    },
    reset() {
      this.searchForm.command = ''
      this.value7 = null
    },
    query() {
      this.HTTP.methods.apiGet("/getpunishment_release").then(res => {
        if (res.code != 200) {
          this.$message.error('返回数据命令码异常，请联系管理员');
        } else {
          this.option.series[0].data = res.data[0].untiedData
          this.option.series[1].data = res.data[0].untiedAmount
          this.option.xAxis[0].data = res.data[0].terminalID
          this.chartsInit()
        }
      })
    },


    search() {
      console.log("4323e")
    }
    
  }
}
</script>

    
